<template>
	<div class="box">
		<div class="box-title" @click="add_box=true">添加月子会所</div>
		<div class="box-bottom">
			<div style="display: flex;margin-bottom: 43px;"><span class="text">月子会所名称</span>
				<el-input style="width: 157px;height: 28px;" v-model="confinementName"></el-input>
			</div>
			<div style="display: flex;">
				<span class="text">创建时间</span>
				<div >
					<el-date-picker v-model="value1" type="daterange" value-format="yyyyMMdd" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
			</div>
			<button class="query" @click="query">查询</button>
		</div>
		<div class="content" v-for="(item,index) in list" :key='index' @click="tabClick(item)">
			<div style="width: 284px;
                        height: 140px;
                        background: #FFFFFF;
                        border: 1px solid #CCCCCC;
                        opacity: 1;
                        border-radius: 5px;" @click="details_box=true">
				<img :src="item.banner" />
			</div>
			<div class="content-right" @click="details_box=true">
				<p style="font-size: 17px;
                          font-family: PingFang SC;
                          font-weight: 500;
                          line-height: 33px;
                          color: #000000;">{{item.confinementName}}</p>
				<p class="introduce">{{item.confinementIntroduce}}</p>
			</div>
			<div class="bnt">
				<span class="edit" @click="edit(item)">编辑</span><span class="delete" @click="del(item)">删除</span>
			</div>
			<div class="data">
				<p>2020-02-12 11:30</p>
			</div>
		</div>
		<!-- 删除弹框 -->
		<el-dialog title="提示" :visible.sync="del_box" width="571px" :before-close="handleClose" center>
			<p class="title" style="text-align: center;">是否确认删除该月子会所</p>
			<p class="name">{{confinementName}}</p>
			<span slot="footer" class="footer" @click="del_sub">确 定</span>
		</el-dialog>
		<!-- 添加月子会所 -->
		<el-dialog title="添加月子会所" :visible.sync="add_box" width="997px" :before-close="handleClose" center>
			<span class="title">月子会所名称
				<el-input v-model="confinementName" />
			</span>
			<div>
				<p class="title">月子会所介绍</p>
				<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="confinementIntroduce">
				</el-input>
			</div>
			<span class="title">月子会所介绍bannner</span>
			<el-upload class="avatar-uploader" action="https://zjsy.fcw-china.com/elecon/electronic/contract/UploadPic"
				:show-file-list="false" :on-success="handleAvatarSuccess">
				<img v-if="imageUrl" :src="imageUrl" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<span slot="footer" class="footer" @click="add_sub">确 定</span>
		</el-dialog>
		<!-- 编辑弹框 -->
		<el-dialog title="编辑月子会所" :visible.sync="edit_box" width="997px" :before-close="handleClose" center>
			<p class="title">月子会所名称</p>
			<el-input v-model="confinementName" />
			<div>
				<p class="title">月子会所介绍</p>
				<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="confinementIntroduce">
				</el-input>
			</div>
			<span class="title"></span>
			<el-upload class="avatar-uploader" action="https://zjsy.fcw-china.com/elecon/electronic/contract/UploadPic"
				:show-file-list="false" :on-success="handleAvatarSuccess">
				<img v-if="banner" :src="banner" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<span slot="footer" class="footer" @click="edit_sub">确 定</span>
		</el-dialog>
		<!-- 会所详情弹框 -->
		<el-dialog title="月子会所" :visible.sync="details_box" width="997px" :before-close="handleClose" center>
			<span class="title">月子会所名称
				<el-input v-model="confinementName" />
			</span>
			<div>
				<p class="title">月子会所介绍</p>
				<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="confinementIntroduce">
				</el-input>
			</div>
			<span class="title">月子会所介绍bannner</span>
			<div class="demo-image__preview">
				<el-image style="width: 100px; height: 100px;" :src="banner" :z-index="num" :previewSrcList="srcList"
					:preview-src-list="srcList">
				</el-image>
			</div>
			<span slot="footer" class="footer" @click="details_sub">确 定</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				confinementId: '', //月子会所id
				Name: '', //手动输入月子会所名称
				confinementName: '', //月子会所名称
				confinementIntroduce: '', //月子会所介绍
				banner: '', //banner图链接
				identification: '', //标识符
				value1: '',
				details_box: false,
				edit_box: false,
				del_box: false,
				add_box: false,
				textarea: '',
				imageUrl: '',
				url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				srcList: [],
				list: [],
				num: 9999,
			}
		},
		methods: {
			// 详情弹框确认
			details_sub() {
				this.handleClose()
			},
			//编辑弹框确认
			edit_sub() {
				// /house/confinement/updateConfinementById
				this.$houseAxios.post('/house/confinement/updateConfinementById', {
					confinementName: this.confinementName,
					confinementIntroduce: this.confinementIntroduce,
					banner: this.banner,
					identification: this.identification,
					confinementId:this.confinementId
				}).then(res => {
					// console.log(res)
					if (res.data.code == 1000) {
						this.edit_box = false;
						this.$message({
							message: '修改成功',
							type: 'warning'
						});
						this.handleClose();
						this.get_list();
					}
				}).catch(err => {

				})
			},
			// 点击编辑
			edit(item) {
				this.edit_box = true;
				this.identification = item.identification;
				this.confinementId = item.confinementId;
			},
			// 点击查询
			query() {
				this.$houseAxios.get('/house/confinement/selectConfinementList', {
					params: {
						confinementName: this.confinementName,
						endTime: this.value1[1] || '',
						startTime: this.value1[0] || '',
						pageNum: 1,
						pageSize: 10,
						// endTime:this.value1[1],
						// startTime:this.value1[0]
					},
					// contentType: "application/x-www-form-urlencoded",
				}).then(res => {
					console.log(res.data.data)
					this.list = res.data.data
				}).catch(err => {})
			},
			// 删除弹框确认
			del_sub() {
				this.$houseAxios.get('/house/confinement/deleteConfinementById', {
					params: {
						confinementId: this.confinementId
					}
				}).then(res => {
					if (res.data.code == 1000) {
						this.del_box = false;
						this.$message({
							message: '删除成功'
						});
						this.handleClose();
						this.get_list();
					}
				}).catch(err => {})
			},
			// 点击删除
			del(item) {
				this.del_box = true;
				this.confinementName = item.confinementName;
				this.confinementId = item.confinementId;
			},
			// 查看会所名称是否存在
			haveName() {
				// /house/confinement/selectConfinNameIsExist
				this.$houseAxios.get('/house/confinement/selectConfinNameIsExist', {
					params: {
						confinementName: this.confinementName
					}
				}).then(res => {
					console.log(res)
					if (res.data.code !== 1000) {
						this.$message({
							message: res.data.message
						});
						return
					}
					if (res.data.code == 1000) {
						this.$houseAxios.post('/house/confinement/insertConfinement', {
							confinementName: this.confinementName,
							confinementIntroduce: this.confinementIntroduce,
							banner: this.banner,
							identification: this.genID(3)

						}).then(res => {
							// console.log(res)
							if (res.data.code == 1000) {
								this.$message({
									message: '添加成功',
									type: 'warning'
								});
								this.handleClose();
								this.get_list()
							}
						}).catch(err => {

						})
					}
				}).catch(err => {})
			},
			// 添加弹框确认
			add_sub() {
				if(this.confinementName==''||this.confinementIntroduce==''||this.banner==''){
					this.$message({
						message:'请填写完整',
					})
					return
				}
				this.haveName()
			},
			// 产生随机唯一标识码
			genID(length) {
				return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
			},
			// 图片上传成功回调
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(res)
				this.banner = res.data
			},
			// 点击查看详情
			tabClick(item) {
				// this.details_box=true;
				console.log(item);
				this.srcList = [];
				this.confinementName = item.confinementName;
				this.confinementIntroduce = item.confinementIntroduce;
				this.banner = item.banner;
				this.srcList.push(item.banner);
				console.log(this.srcList)
			},
			// 获取会所列表
			get_list() {
				this.$houseAxios.get('/house/confinement/selectConfinementList', {
					params: {
						confinementName: this.confinementName,
						pageNum: 1,
						pageSize: 10,
						endTime: this.value1[1] || '',
						startTime: this.value1[0] || ''
					},
					// contentType: "application/x-www-form-urlencoded",
				}).then(res => {
					console.log(res.data.data)
					this.list = res.data.data
				}).catch(err => {})
			},
			// 关闭弹框回调
			handleClose() {
				this.details_box = false,
					this.edit_box = false,
					this.del_box = false,
					this.add_box = false,
					this.confinementIntroduce = '';
					this.confinementName = '';
					this.banner = '';
					this.identification = '';
					this.confinementId = '';
					this.confinementId='';
			}
		},
		created() {
			this.get_list()

		}
	}
</script>

<style scoped="scoped">
	/deep/.el-input__inner{
		height: 33px;
		margin-top: 3px;
	}
	/deep/.el-range-editor.el-input__inner{
		height: 33px;
		margin-top: 3px;
	}
	/deep/.el-dialog__title {
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 37px;
		color: #000000;
	}

	.box {
		width: 85%;
		margin: 2% auto 0 2%;
	}

	.box-title {
		width: 155px;
		height: 42px;
		background: #000000;
		border: 1px solid #CCCCCC;
		border-radius: 11px;
		font-size: 17px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 35px;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 15px;
	}

	.box-bottom {
		height: 154px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		padding: 20px;
		position: relative;
		margin-bottom: 35px;
	}

	.box-bottom>div>span {
		margin-right: 13px;
	}

	.text {
		font-size: 17px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 28px;
		color: #6A6A6A;
	}

	.query {
		width: 155px;
		height: 42px;
		background: #000000;
		border: 1px solid #CCCCCC;
		opacity: 1;
		border-radius: 11px;
		font-size: 17px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 29px;
		color: #FFFFFF;
		position: absolute;
		right: 45px;
		bottom: 29px;
	}

	.content {
		width: 100%;
		height: 178px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		border-radius: 5px;
		margin-bottom: 15px;
		padding: 19px 13px;
		display: flex;
		position: relative;

	}

	img {
		display: inline-block;
		max-height: 100%;
		max-width: 100%;
	}

	.content-right {
		display: flex;
		flex-direction: column;
		margin-left: 25px;
	}

	.introduce {
		width: 909px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 29px;
		color: #464646;
	}

	.bnt {
		position: absolute;
		right: 13px;
	}

	.delete {
		font-size: 14px;
		font-family: .AppleSystemUIFont;
		font-weight: 400;
		color: #FF0000;
	}

	.edit {
		display: inline-block;
		font-size: 14px;
		font-family: .AppleSystemUIFont;
		font-weight: 400;
		color: #000000;
		margin-right: 14px;
	}

	.data {
		position: absolute;
		right: 13px;
		bottom: 14px;
	}

	.data>p {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 22px;
		color: #767676;
	}

	.title {
		font-size: 20px;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 42px;
		color: #000000;
		margin-top: 25px;
		padding: 0;
	}

	.name {
		text-align: center;
		font-size: 36px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 50px;
		color: #000000;
	}

	.footer {
		display: inline-block;
		width: 186px;
		height: 57px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		font-size: 30px;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 42px;
		color: #000000;
		border-radius: 5px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		display: block;
	}

	/deep/.el-upload {
		border: 1px dashed #CCCCCC;
		margin-bottom: 80px;
		margin-top: 20px;
		width: 20%;
		height: 20%;
	}
</style>
